<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES6 => 新增箭头函数  
    // ES6 允许使用“箭头”（=>）定义函数。

    // 使用箭头函数需要注意:
    // （1）箭头函数没有自己的this对象（详见下文）。
    // （2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
    // （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
    // （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

    // (1) 箭头函数中不能使用arguments,如果要用，可以用 rest 参数代替
    // var add = () => {
    //     console.log(arguments);  // 报错: arguments is not defined
    // }

    // var add = (...list) => {
    //     console.log(list);
    // }
    // add(1, 4, 7, 2, 5, 8, 3, 6, 9);


    // (2) 箭头函数没有自己的this对象 => 如果箭头函数中出现this, 此时this依赖于定义时上层作用域中的this执行(简单来说 箭头函数遇到this就向外跳一层 找父作用域, 如果父作用域还是箭头函数,继续向外跳一层 依次类推, 最终找不到指向window)

    // 单层箭头函数  this->window

    /* var fn = () => {
        console.log("this", this);
    }
    fn();

    var obj = {
        a: 1,
        b: 2,
        // sum: function () {
        //     console.log("this", this); // this->obj
        // },
        sum: () => {
            console.log("this", this); // this->obj
        }
    } */

    // 普通函数嵌套箭头函数   => 父作用域this指向

    // function add() {
    //     console.log(this); // this -> window
    //     var fn = () => {
    //         console.log("this", this);
    //     }
    //     fn();
    // }
    // add();

    // var obj = {
    //     a: 1,
    //     b: 2,
    //     sum: function () {
    //         console.log("this", this); // this->obj
    //         var fn = () => {
    //             console.log("this", this);
    //         }
    //         fn();
    //     }
    // }
    // obj.sum();

    // document.onclick = function () {
    //     console.log("this", this);

    //     var fn = () => {
    //         console.log("this", this);
    //     }
    //     fn();
    // }


    // 箭头函数嵌套箭头函数

    // var add = () => {
    //     console.log(this); // this -> window
    //     var fn = () => {
    //         console.log("this", this);
    //     }
    //     fn();
    // }
    // add();


    var obj = {
        a: 1,
        b: 2,
        sum: () => {
            console.log("this", this); // this->window
            var fn = () => {
                console.log("this", this);   // this->window
            }
            fn();
        }
    }
    obj.sum();

</script>

</html>